<!-- DataGovernanceProcess.vue -->
<template>
  <div class="feature-fusion-lab">
    <div class="header">
      <h1 class="title">电磁特征融合实验室</h1>
      <div class="controls">
        <el-select v-model="dataSource" size="small" placeholder="数据源选择">
          <el-option
              v-for="item in dataSources"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
        <el-button type="primary" size="small" @click="runFusion">
          <el-icon><MagicStick /></el-icon>
          启动融合
        </el-button>
      </div>
    </div>
    <div class="fusion-container">
      <MultiModalFeatureExtractor />
      <FusionStrategySandbox />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { MagicStick } from '@element-plus/icons-vue'
import MultiModalFeatureExtractor from './feature/MultiModalFeatureExtractor.vue'
import FusionStrategySandbox from './feature/FusionStrategySandbox.vue'
import {ElButton, ElIcon, ElOption, ElSelect} from "element-plus";

const dataSource = ref('signal')
const dataSources = [
  { value: 'signal', label: '电磁波形数据' },
  { value: 'sar', label: 'SAR图像数据' },
  { value: 'hyperspectral', label: '高光谱数据' }
]

const runFusion = () => {
  // 触发融合逻辑
}
</script>

<style scoped>
.feature-fusion-lab {
  display: flex;
  flex-direction: column;
  width: 94vw;
  background: linear-gradient(135deg, #0f1a30 0%, #1d2b4b 100%);
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
  color: #e4f0ff;
  overflow: hidden;
  padding: 1vh 1vw;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5vh;
  padding-bottom: 1.5vh;
  border-bottom: 1px solid rgba(75, 130, 230, 0.3);
}

.title {
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: 0.8px;
  background: linear-gradient(to right, #4db8ff, #9c42ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 15px rgba(126, 87, 194, 0.4);
  margin: 0;
}

.controls {
  display: flex;
  align-items: center;
  gap: 1vw;
}

.fusion-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2vh;
  height: calc(100% - 8vh);
}
</style>